﻿@using Smartstore.Web.Rendering.Menus
@using Smartstore.Collections
@using Smartstore.Core.Content.Menus

@model MenuModel

@{
    var root = Model.Root;
    if (root == null)
    {
        return;
    }

    string accountUrl = Url.RouteUrl("Login", new { returnUrl = Request.RawUrl() });
    var registerUrl = Url.RouteUrl("Register");
    var returnUrl = Context.Request.Query["returnUrl"].ToString();
    if (returnUrl.HasValue())
    {
        registerUrl = Display.ModifyQueryString(registerUrl, "returnUrl=" + returnUrl.UrlEncode());
    }
}

<div id="picnav">
    <!-- 左侧导航菜单 -->
    <div class="b_left" style="left: 0px;top: 0px;">
        <div class="menu_con" style="float: left;">
            <div class="banner_menu_left" style="width: 183px;height: 485px;">
                @for (int i = 1; i <= (root.Children.Count > 18 ? 18 : root.Children.Count); i += 2)
                {
                    var nodeFirst = root.Children[i - 1].Value;
                    var itemText1 = root.Children[i - 1].GetItemText(T);
                    var itemUrl1 = nodeFirst.GenerateUrl(this.ViewContext);
                    var nodeSecond = (i + 1) > root.Children.Count ? null : root.Children[i].Value;
                    var itemText2 = (i + 1) > root.Children.Count ? null : root.Children[i].GetItemText(T);
                    var itemUrl2 = (i + 1) > root.Children.Count ? null : nodeSecond.GenerateUrl(this.ViewContext);
                    <ul class="cur_l" style="width: 183px;height: 35px;">
                        <li style="padding-top: 7px;width: 183px;	margin-left: 0px;	height: 35px;text-align: center;">
                            @if (itemText1.HasValue())
                            {
                                <a href="@itemUrl1" class="nav-span" style="margin-left: 5px;margin-right: 5px;text-decoration:none">
                                    <span class="nav-span" style="margin-left: 5px;margin-right: 5px;">@itemText1</span>
                                </a>
                            }
                            @if (itemText2.HasValue())
                            {
                                <a href="@itemUrl2" class="nav-span" style="margin-left: 5px;margin-right: 5px;text-decoration:none">
                                    <span class="nav-span" style="margin-left: 5px;margin-right: 5px;">@itemText2</span>
                                </a>
                            }
                        </li>
                    </ul>
                }
            </div>
            <div class="banner_menu_right">
                @for (int i = 1; i <= (root.Children.Count > 18 ? 18 : root.Children.Count); i += 2)
                {
                    var nodeFirst = root.Children[i - 1].Value;
                    var itemText1 = root.Children[i - 1].GetItemText(T);
                    var itemUrl1 = nodeFirst.GenerateUrl(this.ViewContext);
                    var nodeSecond = (i + 1) > root.Children.Count ? null : root.Children[i].Value;
                    var itemText2 = (i + 1) > root.Children.Count ? null : root.Children[i].GetItemText(T);
                    var itemUrl2 = nodeSecond == null ? null : nodeSecond.GenerateUrl(this.ViewContext);
                    <ul>
                        @if (itemText1.HasValue())
                        {
                            <h3><a href="@itemUrl1"><span>@itemText1</span></a></h3>
                            @foreach (var node in root.Children[i - 1].Children.Where(x => x.Value.Visible))
                            {
                                var item = node.Value;
                                var itemUrl = item.GenerateUrl(this.ViewContext);
                                <li>
                                    <div>
                                        <a href="@itemUrl"><font color='#1C5EAC'>@item.Text</font></a>
                                    </div>
                                    <div style="margin-left: 80px;">
                                        @foreach (var nodeD in node.Children)
                                        {
                                            var itemD = nodeD.Value;
                                            var itemUrlD = itemD.GenerateUrl(this.ViewContext);
                                            <a href="@itemUrlD">@itemD.Text</a>
                                        }
                                    </div>
                                </li>
                            }
                            <li>
                                <div>
                                    <a href=""><font color='#1C5EAC'>介入科</font></a>
                                </div>
                                <div style="margin-left: 80px;">
                                    <a href="">一次性使用非血管腔道斑马导丝</a><a href="">非血管腔道导丝-消化道、气道用</a><a href="">一次性使用无菌亲水性导丝</a><a href="">一次性使用引流导管及附件</a><a href="">输尿管支架</a><a href="">微创扩张引流套件</a><a href="">血管球囊扩张导管</a><a href="">内窥镜取石网篮</a><a href="">胸主动脉覆膜支架系统</a><a href="">血栓抽吸导管</a><a href="">外周球囊扩张导管</a><a href="">外周球囊扩张导管</a><a href="">鼻胆引流导管</a><a href="">一次性使用泌尿道用导丝</a><a href="">镍钛记忆合金肠道支架</a><a href="">镍钛记忆合金胆道支架</a><a href="">镍钛记忆合金呼吸道支架</a><a href="">镍钛记忆合金食道支架</a><a href="">医用血管造影X射线机</a><a href="">X射线计算机体层摄影设备</a><a href="">自动推注系统</a><a href="">一次性使用取石球囊JH</a><a href="">一次性使用无菌引流导管套装</a><a href="">一次性使用留置引流导管包</a><a href="">一次性使用高压造影注射器及附件</a><a href="">胆道支架</a><a href="">股动脉压迫止血器</a><a href="">一次性使用胆道引流管</a><a href="">一次性使用压力连接管</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href=""><font color='#1C5EAC'>导管室</font></a>
                                </div>
                                <div style="margin-left: 80px;">
                                    <a href="">一次性使用介入治疗辐射防护手套</a><a href="">百变铅衣</a><a href="">铅围领</a><a href="">防护屏</a><a href="">铅围裙</a><a href="">一次性使用输尿管导管</a><a href="">一次性使用输尿管导引鞘</a><a href="">铅衣</a><a href="">铅眼镜</a><a href="">铅衣架</a>
                                </div>
                            </li>
                        }
                        @if (itemText2.HasValue())
                        {
                            <h3><a href="@itemUrl2"><span>@itemText2</span></a></h3>
                            @foreach (var node in root.Children[i].Children.Where(x => x.Value.Visible))
                            {
                                var item = node.Value;
                                var itemUrl = item.GenerateUrl(this.ViewContext);
                                <li>
                                    <div>
                                        <a href="@itemUrl"><font color='#1C5EAC'>@item.Text</font></a>
                                    </div>
                                    <div style="margin-left: 80px;">
                                        @foreach (var nodeD in node.Children)
                                        {
                                            var itemD = nodeD.Value;
                                            var itemUrlD = itemD.GenerateUrl(this.ViewContext);
                                            <a href="@itemUrlD">@itemD.Text</a>
                                        }
                                    </div>
                                </li>
                            }
                        }
                    </ul>
                }
            </div>
        </div>

 @*        <script language="javascript">
            $(function () {
                $(".banner_menu_left ul").hover(function () {
                    var index = $('.banner_menu_left ul').index(this);
                    // alert(index);
                    $('.banner_menu_left ul').eq(index).addClass("cur_l").siblings('.banner_menu_left ul').removeClass("cur_l");
                    $('.banner_menu_right').show();
                    $('.banner_menu_right ul').eq(index).addClass("b_show").siblings('.banner_menu_right ul').removeClass("b_show");
                }, function () {
                    $('.banner_menu_right').hide();
                });


                $(".banner_menu_right").hover(function () {
                    $('.banner_menu_right').show();
                }, function () {
                    $('.banner_menu_right').hide();
                    //$('.banner_menu_right').show();
                });
                //tab news
                $('.ntab span').mouseover(function () {
                    var index = $('.ntab span').index(this);
                    $('.ntab span').eq(index).removeClass('sborder spbg').siblings('.ntab span').addClass('sborder spbg');
                    $('.ntab ul').eq(index).show().siblings('.ntab ul').hide();
                });
            })
        </script> *@

    </div>

    <!-- 右侧登录框 -->
    <div class="b_right" style="right: 0px;top: 0px;width:183px;">
        <div class="banner_right" style="width: 183px;">
            <div class="banner_login" style="width:183px;height: 485px;">
                <li style="margin-top: 23px;text-align: center;">
                    <img src="~/images/banner/touxiang.png">
                </li>
                <li style="text-align: center;height: 30px;">
                    <span>Hi~您好</span>
                </li>
                <li style="text-align: center;height: 40px;">
                    <a href="@accountUrl"><img src="~/images/banner/login.png"></a>
                </li>
                <li style="text-align: center;height: 40px;">
                    <a href="@registerUrl"><img src="~/images/banner/reg.png"></a>
                </li>
                <li style="text-align: center;height: 10px;">
                    <img src="~/images/banner/line_gray.png">
                </li>
                <li style="text-align: center;">
                    <div style="margin-top:20px;margin-bottom: 5px;font-size: 14px;">
                        <span>会员专属权益</span>
                    </div>
                </li>
                <div style="text-align: center;">
                    <p>
                        <img src="~/images/banner/zhuanshuzhekou.png" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="~/images/banner/shouhouwuyou.png" />
                    </p>
                    <p>
                        <img src="~/images/banner/zhengzhiquanyi.png" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="~/images/banner/zhuanshukefu.png" />
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="main_visual">
        <style>
            @@media (max-width: 1024px) {
                #picnav{
                    display:none;
                }
            }

            #picnav {
                width: 100%;
                height: 502px;
                margin: -15px auto 10px auto;
                position: relative;
                background: #fff;
                border-color: transparent;
                box-shadow: 0 calc(2px * 1) 16px -2px rgba(26, 33, 75, calc(1 * 0.12)), 0 calc(2px * 1) 3px -2px rgba(0,0,0, calc(1 * 0.15));
                
                li{
                    list-style-type: none;
                }
            }

            .main_image {
                width: 100%;
                height: 485px;
                overflow: hidden;
                margin: 0 auto;
                position: relative;
            }

                .main_image ul {
                    width: 9999px;
                    height: 485px;
                    overflow: hidden;
                    position: absolute;
                    top: 0;
                    left: 0
                }

                .main_image li {
                    float: left;
                    width: 100%;
                    height: 485px;
                }

                    .main_image li span {
                        display: block;
                        width: 100%;
                        height: 485px
                    }

                    .main_image li a {
                        display: block;
                        width: 100%;
                        height: 485px
                    }

                    .main_image li .img_1 {
                        background: url('/images/banner/banner_001.jpg') center top no-repeat
                    }

                    .main_image li .img_2 {
                        background: url('/images/banner/banner_002.jpg') center top no-repeat
                    }

                    .main_image li .img_3 {
                        background: url('/images/banner/banner_003.jpg') center top no-repeat
                    }

                    .main_image li .img_4 {
                        background: url('/images/banner/banner_004.jpg') center top no-repeat
                    }

                    .main_image li .img_5 {
                        background: url('/images/banner/banner_005.jpg') center top no-repeat
                    }

            div.flicking_con {
                width: 990px;
                margin: 0 auto;
                position: relative
            }

                div.flicking_con .flicking_inner {
                    position: absolute;
                    top: 360px;
                    left: 90px;
                    z-index: 999;
                    width: 300px;
                    height: 21px
                }
                /* 121126 */
                div.flicking_con a {
                    float: left;
                    width: 21px;
                    height: 21px;
                    margin: 0;
                    padding: 0;
                    display: block;
                    text-indent: -1000px
                }

                    div.flicking_con a.on {
                        background-position: 0 -21px
                    }

            #btn_prev, #btn_next {
                z-index: 11;
                position: absolute;
                display: block;
                width: 73px !important;
                height: 74px !important;
                top: 50%;
                margin-top: -37px;
                display: none;
            }

            #btn_prev {
                left: 30px;
                background: url(/images/banner/star_05.png) no-repeat left top
            }

            #btn_next {
                right: 30px;
                background: url(/images/banner/star_06.png) no-repeat right top
            }

            .b_left {
                width: 210;
                position: absolute;
                left: 2%;
                top: 10px;
                z-index: 9;
            }

            .b_right {
                width: 460px;
                position: absolute;
                right: 2%;
                top: 10px;
                z-index: 9;
            }

            .banner_menu {
                width: 710px;
                height: 540px;
                position: absolute;
                z-index: 99999;
                top: 10px;
            }

            .banner_ico {
                width: 39px;
                height: 41px;
                background: url(/images/banner/banner_ico.png) no-repeat;
                position: absolute;
                left: -39px;
                top: 10px;
            }

            .banner_menu_left {
                width: 220px;
                float: left;
                height: 540px;
                background: url(/images/banner/banner_left_bg.png) repeat-y left top;
                padding-top: 0px;
                margin-top: 10px;
            }

                .banner_menu_left span.eshops {
                    width: 210px;
                    height: 70px;
                    float: left;
                    padding-top: 15px;
                    padding-bottom: 10px;
                    background: url(/images/banner/banner_left_ul.png) no-repeat left bottom;
                }

                    .banner_menu_left span.eshops h3 {
                        width: 190px;
                        height: 30px;
                        float: left;
                        line-height: 30px;
                        margin-left: 20px;
                        font-size: 16px;
                        font-weight: normal;
                    }

                .banner_menu_left ul {
                    width: 210px;
                    height: 80px;
                    float: left;
                    box-sizing: content-box;
                    padding: 10px 0 9px 0;
                    margin-bottom: 0;
                    background: url(/images/banner/banner_left_ul.png) no-repeat left bottom;
                }

                    .banner_menu_left ul.cur_l {
                        color: #EB544B;
                    }

                    .banner_menu_left ul h3 {
                        width: 190px;
                        height: 30px;
                        float: left;
                        line-height: 30px;
                        margin-left: 20px;
                        font-size: 18px;
                        font-weight: 500;
                    }

                    .banner_menu_left ul li {
                        width: 190px;
                        height: 45px;
                        float: left;
                        margin-left: 20px;
                        font-size: 14px;
                        overflow: hidden;
                    }

                        .banner_menu_left ul li a {
                            padding-right: 10px;
                            float: left;
                            line-height: 185%;
                            color: #a5a5a5;
                        }

            .banner_menu_right {
                width: 842px;
                float: left;
                background: #fff;
                padding-left: 40px;
                margin-top: 10px;
                display: none;
                margin-left: -10px;
                box-sizing: content-box;
            }

                .banner_menu_right ul {
                    width: 840px;
                    float: left;
                    height: 475px;
                    overflow: hidden;
                    display: none;
                }

                    .banner_menu_right ul.b_show {
                        display: block;
                    }

                    .banner_menu_right ul h3 {
                        width: 450px;
                        height: 30px;
                        padding-top: 20px;
                        float: left;
                        line-height: 30px;
                        font-size: 18px;
                        font-weight: 500;
                        border-bottom: 1px solid #000;
                        box-sizing: content-box;
                    }

                        .banner_menu_right ul h3 span {
                            width: 200px;
                            height: 30px;
                            float: left;
                        }

                        .banner_menu_right ul h3 a.mores {
                            width: 60px;
                            height: 30px;
                            float: right;
                            font-size: 12px;
                            color: #83A1EA;
                            text-align: right;
                            padding-right: 5px;
                        }

                    .banner_menu_right ul li {
                        width: 100%;
                        min-height: 25px;
                        float: left;
                        line-height: 25px;
                        font-size: 14px;
                    }

                        .banner_menu_right ul li a {
                            padding: 0px 10px 10px 11px;
                            height: 14px;
                            line-height: 14px;
                            float: left;
                            color: #5e5e5e;
                            border-left: 1px solid #e6e6e6;
                            margin-top: 5px;
                            margin-left: -1px;
                            white-space: normal;
                            box-sizing: content-box;
                            text-decoration: none;
                        }


            .menu_ads {
                width: 460px;
                height: 425px;
                float: right;
            }

                .menu_ads img {
                    width: 460px;
                    height: 425px;
                }


            .banner_right {
                width: 270px;
                position: absolute;
                right: 0px;
                top: 10px;
            }

            .banner_login {
                width: 270px;
                height: 250px;
                float: left;
                background: #fff;
            }

            .banner_right_ad {
                width: 270px;
                height: 135px;
                background: #fff;
                float: left;
                margin-top: 10px;
                overflow: hidden;
            }


            /*tab*/
            .ntab {
                width: 268px;
                height: 249px;
                border: 1px solid #CCCCCC;
                float: left;
            }

                .ntab span {
                    display: block;
                    width: 82px;
                    height: 40px;
                    line-height: 40px;
                    float: left;
                    text-align: center;
                    cursor: pointer
                }

            .sborder {
                border-left: 1px solid #CCCCCC;
                border-bottom: 1px solid #CCCCCC;
            }

            .spbg {
                background: url(/images/banner/header/tab.png) repeat-x
            }

            .ntab ul {
                width: 250px;
                height: 50px;
                margin-top: 50px;
                margin-left: 5px;
            }

                .ntab ul li {
                    width: 245px;
                    height: 20px;
                    line-height: 20px;
                    float: right;
                    overflow: hidden;
                    margin-top: 10px;
                    font-size: 14px;
                }

            .banner_bottom {
                width: 100%;
                height: 110px;
                margin: 0 auto;
                position: relative;
            }

            .banner_bottom_pic {
                width: 100%;
                height: 110px;
                text-align: center;
                background: #F6F6F6;
                float: left;
            }

            #mainid {
                width: 1204px;
                margin: 0 auto;
            }

            .mainid {
                width: 1204px;
                float: left;
            }

            .hot_tab {
                width: 1204px;
                float: left;
                margin-top: 5px;
            }

            .hspan {
                width: 1204px;
                height: 35px;
                float: left;
                line-height: 35px;
                margin-top: 10px;
                margin-bottom: 15px;
            }

            .jptj {
                width: 100px;
                height: 35px;
                float: left;
                text-align: center;
                font-size: 15px;
                color: #5E5E5E;
                ;
                font-weight: 500;
                margin-right: 80px;
            }

            .hot_tab span {
                display: block;
                width: 80px;
                height: 35px;
                margin-right: 10px;
                font-size: 15px;
                float: left;
                text-align: center;
                cursor: pointer;
            }

            .hborder {
            }

            .hpbg {
            }

            .hot_tab span.runtab {
                color: #4B7ED1;
                border-bottom: 2px solid #4B7ED1;
                font-weight: 500;
            }

            .ajaxbg {
                background: url(/images/banner/ajaxbg.png) no-repeat;
                width: 100px;
                height: 32px;
                float: right;
                cursor: pointer;
                margin-top: 20px;
            }

            .hot_tab ul {
                width: 1178px;
                border: 1px solid #FFF;
                float: left;
                border-left: 0px;
            }

                .hot_tab ul li {
                    width: 230px;
                    height: 300px;
                    float: left;
                    overflow: hidden;
                    border-left: 1px solid #FFF;
                    padding-left: 3px;
                }

            .hgoodspic {
                width: 220px;
                height: 220px;
                overflow: hidden;
                text-align: center;
            }

                .hgoodspic img {
                    max-width: 220px;
                    height: 220px;
                    padding: 10px;
                    -webkit-transition: all 0.4s ease;
                    -moz-transition: all 0.4s ease-in-out;
                    -o-transition: all 0.4s ease-in-out;
                }

                    .hgoodspic img:hover {
                        -webkit-transform: scale(1.15);
                        -moz-transform: scale(1.15);
                        -o-transform: scale(1.15);
                        opacity: 0.90;
                        filter: alpha(opacity=90);
                    }

            .hgoodsname {
                line-height: 120%;
                overflow: hidden;
                width: 220px;
                text-align: center;
                padding: 10px;
                font-size: 14px;
            }

            .goodprice {
                color: #1A5FAA;
                line-height: 120%;
                width: 220px;
                text-align: center;
                font-size: 15px;
                font-weight: 700
            }


            .tadv {
                width: 1200px;
                float: left;
                margin-top: 8px;
                margin-bottom: 5px;
            }

                .tadv img {
                    width: 1200px;
                    float: left
                }

            /*floor样式*/
            .a_floor {
                float: left;
                width: 1178px;
                overflow: hidden
            }

            .floor {
                float: left;
                padding-top: 10px;
                width: 100%;
                overflow: hidden
            }

            .ypfl-hd {
                background: none repeat scroll 0px 0px #FFF;
                height: 50px;
                line-height: 50px;
                width: 100%;
                font-size: 16px;
                margin-bottom: 15px;
                float: left
            }

            .ypfl-hd-left {
                float: left;
                width: 130px;
                border-bottom: 0px solid #ccc
            }

                .ypfl-hd-left strong {
                    display: block;
                    font-weight: bold;
                    padding-left: 45px;
                    width: 80px;
                    margin: 0 auto
                }

            .ypfl-hd-right {
                float: left;
                width: 430px;
                margin-left: 0px;
                display: inline
            }

                .ypfl-hd-right li a {
                    font-size: 12px;
                    border-bottom: 0px solid #1A5FAA;
                    float: left;
                    text-align: center
                }

                    .ypfl-hd-right li a.hover {
                        border-bottom: 1px solid #1A5FAA; /*!background:url(/images/banner/this_icon.png) center bottom no-repeat;*/
                    }

            .sy-tilbg1 {
                background: url('~/images/banner/1.png') no-repeat scroll left center transparent;
            }

            .sy-tilbg2 {
                background: url('~/images/banner/2.png') no-repeat scroll left center transparent;
            }

            .sy-tilbg3 {
                background: url('~/images/banner/3.png') no-repeat scroll left center transparent;
            }

            .sy-tilbg4 {
                background: url('~/images/banner/4.png') no-repeat scroll left center transparent;
            }

            .sy-tilbg5 {
                background: url('~/images/banner/5.png') no-repeat scroll left center transparent;
            }

            .sy-tilbg6 {
                background: url('~/images/banner/6.png') no-repeat scroll left center transparent;
            }

            .sy-tilbg7 {
                background: url('~/images/banner/7.png') no-repeat scroll left center transparent;
            }

            .ypfl-bd {
                border: 0px solid #DDD;
                border-top: none;
                float: left;
                width: 100%;
                height: 298px;
                overflow: hidden
            }

            .ypfl-left {
                float: left;
                width: 200px;
            }

            .ypfl-left-list {
                margin: 0px;
            }

            .sy-prod0 {
                float: left;
                width: 100%;
                margin-left: -5px;
                display: inline;
            }

            .sy-proinfo li {
                display: inline;
                float: left;
                margin-top: 10px;
                margin-left: 20px;
                width: 170px;
                height: 230px;
            }

            .item-figure {
                border-radius: 5px 5px 5px 5px;
                width: 170px;
                height: 170px;
                background: #FFF;
                overflow: hidden;
                border: 1px solid #FFF
            }

            .sy-proinfo li img {
                width: 170px;
                height: 170px;
            }

            .sy-proinfo img {
                -webkit-transition: all 0.4s ease;
                -moz-transition: all 0.4s ease-in-out;
                -o-transition: all 0.4s ease-in-out;
            }

                .sy-proinfo img:hover {
                    -webkit-transform: scale(1.15);
                    -moz-transform: scale(1.15);
                    -o-transform: scale(1.15);
                    opacity: 0.90;
                    filter: alpha(opacity=90);
                }

            .goodspic {
                border-radius: 5px 5px 0px 0px;
                width: 170px;
                height: 170px;
                background: #FFF;
                overflow: hidden;
                border: 1px solid #CCC
            }

                .goodspic img {
                    width: 170px;
                    height: 170px;
                    -webkit-transition: all 0.4s ease;
                    -moz-transition: all 0.4s ease-in-out;
                    -o-transition: all 0.4s ease-in-out;
                }

                    .goodspic img:hover {
                        -webkit-transform: scale(1.15);
                        -moz-transform: scale(1.15);
                        -o-transform: scale(1.15);
                        opacity: 0.90;
                        filter: alpha(opacity=90);
                    }

            .sy-profont0 {
                padding-top: 10px;
                height: 47px;
                overflow: hidden;
            }

            .sy-profont1 span {
                text-decoration: line-through;
            }

            .sy-profont1 b {
                color: #F00;
                font-family: Arial,Helvetica,sans-serif;
                font-size: 16px;
                height: 50px;
                line-height: 50px;
            }

            .trademark {
                width: 214px;
                float: right
            }

            .t_center {
                width: 214px;
                float: right;
                overflow: hidden;
                height: 314px;
                margin-top: 60px;
            }

                .t_center img {
                    width: 214px;
                    height: 314px;
                }

                .t_center .sj_logo {
                    width: 206px;
                    float: left;
                    border: 4px solid #CEDAA2;
                    height: 306px
                }

                .t_center a.li {
                    float: left;
                    width: 102px;
                    height: 50px;
                    margin-left: -1px;
                    margin-top: -1px;
                    overflow: hidden;
                    display: inline;
                    background: none repeat scroll 0% 0% #FFF;
                    border: 1px solid #F4F4F4;
                    position: relative;
                }

                    .t_center a.li i {
                        font-style: normal;
                        color: #FFF;
                        width: 99px;
                        overflow: hidden;
                        height: 43px;
                        line-height: 18px;
                        font-size: 12px;
                        position: absolute;
                        top: 0px;
                        left: -100px;
                        text-align: center;
                        z-index: 2;
                        padding-top: 9px;
                        text-decoration: none;
                        cursor: pointer;
                        transition: all 0.3s ease-out 0s;
                        background: none repeat scroll 0% 0% #8FBA1F;
                        opacity: 0.9;
                    }

                        .t_center a.li i strong {
                            font-weight: bold;
                            font-size: 14px;
                        }

                    .t_center a.li.ov i {
                        display: block;
                        left: 0px;
                    }

            .fgoodsname {
                line-height: 120%;
                overflow: hidden;
                width: 170px;
                text-align: center;
                padding-top: 10px;
                font-size: 16px;
            }

            .fgoodsname {
                line-height: 120%;
                overflow: hidden;
                width: 170px;
                text-align: center;
                font-size: 14px;
                padding-bottom: 5px;
            }

            .spjg {
                color: #1A5FAA;
                line-height: 120%;
                width: 170px;
                text-align: center;
                font-size: 15px;
                font-weight: 700
            }
        </style>
        <style type="text/css">
            .nav-span {
                color: #1C5EAC;
                font-size: 15px;
            }

            .nav-span_1 {
                color: #A5A5A5;
                font-size: 14px;
            }

            .li-span {
                text-align: center;
                width: 170px;
                margin-left: 0px;
                height: 45px;
            }

            .li-span_1 {
                text-align: center;
                width: 170px;
                margin-left: 0px;
                height: 20px;
                margin-top: -20px;
            }

            .md-content {
                position: fixed;
                top: 443px;
                left: 50%;
                width: 50%;
                max-width: 820px;
                min-width: 820px;
                height: auto;
                z-index: 2000;
                /*visibility: hidden;*/
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                backface-visibility: hidden;
                -webkit-transform: translateX(-50%) translateY(-50%);
                -moz-transform: translateX(-50%) translateY(-50%);
                -ms-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
                background: #fff;
                box-shadow: 0px 0px 100px 10PX black;
                font-size: 14px;
            }

            .md-content_close {
                visibility: hidden;
            }

            .md-content_show {
                visibility: visible;
            }

            .md-close {
                height: 40px;
                width: 300px;
                background: #136DAE;
                border: 0;
                color: #FFF;
                font-size: 14px;
                cursor: pointer;
            }
        </style>
        <div class="main_image" style="width: 820px;top: 10px;">
            <ul>
                <li><a href="" style="display:block" target="_blank"><span class="img_1"></span></a></li>
                <li><a href="" style="display:block" target="_blank"><span class="img_2"></span></a></li>
                <li><a href="" style="display:block" target="_blank"><span class="img_3"></span></a></li>
                <li><a href="" style="display:block" target="_blank"><span class="img_4"></span></a></li>
            </ul>
            <a href="javascript:;" id="btn_prev"></a>
            <a href="javascript:;" id="btn_next"></a>
        </div>
    </div>
    <script src="~/js/banner/jquery.touchslider.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".main_visual").hover(function () {
                $("#btn_prev,#btn_next").fadeIn()
            }, function () {
                $("#btn_prev,#btn_next").fadeOut()
            })
            $dragBln = false;
            $(".main_image").touchSlider({
                flexible: true,
                speed: 500,
                btn_prev: $("#btn_prev"),
                btn_next: $("#btn_next"),
                paging: $(".flicking_con a"),
                counter: function (e) {
                    $(".flicking_con a").removeClass("on").eq(e.current - 1).addClass("on");
                }
            });
            $(".main_image").bind("mousedown", function () {
                $dragBln = false;
            })
            $(".main_image").bind("dragstart", function () {
                $dragBln = true;
            })
            $(".main_image a").click(function () {
                if ($dragBln) {
                    return false;
                }
            })
            timer = setInterval(function () {
                $("#btn_next").click();
            }, 6000);
            $(".main_visual").hover(function () {
                clearInterval(timer);
            }, function () {
                timer = setInterval(function () {
                    $("#btn_next").click();
                }, 6000);
            })
            $(".main_image").bind("touchstart", function () {
                clearInterval(timer);
            }).bind("touchend", function () {
                timer = setInterval(function () {
                    $("#btn_next").click();
                }, 6000);
            });
            //tab goods
            $('.JPTJ_choice span').mouseover(function () {
                var index = $('.JPTJ_choice span').index(this);
                $('#tags').val(index * 1 + 1);
                $('#pageid').val(2);
                $('.JPTJ_choice span').eq(index).addClass('runtab').removeClass('hborder hpbg').siblings('.JPTJ_choice span').removeClass('runtab').addClass('hborder hpbg');
                $('.hot_tab ul').eq(index).show().siblings('.hot_tab ul').hide();
            });
        });
    </script>
</div>